<template>
	<view class="container">
		<uni-card v-if="info" title="记账详情" :extra="(info.type==0)?'支出':'收入'">
			<van-row>
				<van-col span="12">
					<view class="text">
						<van-tag size="large" type="success">类型</van-tag>
						<text>{{info.cate | toCate}}</text>
					</view>
				</van-col>
				<van-col span="12">
					<view class="text">
						<van-tag size="large" type="danger">金额</van-tag>
						<text style="color: red;">{{info.money }}</text>
					</view>
				</van-col>
			</van-row>
			<van-row>
				<van-col span="24">
					<view class="text">
						<van-tag size="large" type="primary">时间</van-tag>
						<text>{{info.datetime}}</text>
					</view>
				</van-col>
			</van-row>
			<van-row>
				<van-col span="24">
					<view class="text">
						<van-tag size="large" type="primary">详情</van-tag>
						<text>{{info.detail}}</text>
					</view>
				</van-col>
			</van-row>
			<van-row>
				<van-col span="24">
					<view class="text">
						<van-tag color="#7232dd" size="large" type="primary">所属月份</van-tag>
						<text>{{info.month}}</text>
					</view>
				</van-col>
			</van-row>
			<van-button v-if="info.type==0"  color="#38A678" type="primary" round size="large">支出</van-button>
			<van-button v-else type="info" round size="large">收入</van-button>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {}
			};
		},
		filters: {
			toCate(val) { // 过滤渲染数据的分类
				let st = ''
				switch (val) {
					case 1:
						st = '餐饮';
						break;
					case 2:
						st = '交通';
						break;
					case 3:
						st = '购物';
						break;
					case 4:
						st = '娱乐';
						break;
					case 5:
						st = '生活缴费';
						break;
					case 6:
						st = '红包转账';
						break;
				}
				return st;
			}
		},
		onLoad(options) {
			console.log("读取参数,并渲染数据");
			this.info = JSON.parse(options.query)
			console.log(this.info);
		}
	}
</script>

<style scoped lang="scss">
	.text {
		display: flex;
		height: 40px;
		font-size: 20px;
		align-items: center;

		text {
			margin-left: 10px;
		}
	}

</style>
